@import "./InvisibleTextStyles.css";

:host([disabled]) {
	opacity: var(--_ui5_slider_disabled_opacity);
	cursor: default;
	pointer-events: none;
}

:host {
	box-sizing: border-box;
	cursor: pointer;
	vertical-align: top;
	width: 100%;
}

:host(:not([hidden])) {
	display: inline-block;
}

.ui5-slider-root {
	box-sizing: border-box;
	height: 3.3125rem;
	outline: none;
	padding: var(--_ui5_slider_padding);
	touch-action: none;
}

.ui5-slider-inner {
	background-repeat: no-repeat;
	position: relative;
	min-width: var(--_ui5_slider_inner_min_width);
	height: 100%;
}

.ui5-slider-progress-container {
	width: 100%;
	background: var(--_ui5_slider_progress_container_background);
	border: var(--_ui5_slider_progress_border);
	border-radius: var(--_ui5_slider_progress_border_radius);
	height: var(--_ui5_slider_inner_height);
	position: relative;
	box-sizing: var(--_ui5_slider_progress_box_sizing);
	top: var(--_ui5_slider_progress_container_top);
}

.ui5-slider-progress-container::before,
.ui5-slider-progress-container::after {
	display: var(--_ui5_slider_progress_container_dot_display);
	content: "";
	position: absolute;
	border-radius: 50%;
	width: var(--_ui5_slider_start_end_point_size);
	height: var(--_ui5_slider_start_end_point_size);
	top: var(--_ui5_slider_start_end_point_top);
}

.ui5-slider-progress-container::before {
	inset-inline-start: var(--_ui5_slider_start_end_point_left);
	background-color: var(--_ui5_slider_progress_before_background);
	border: var(--_ui5_slider_progress_before_border);
}

.ui5-slider-progress-container::after {
	inset-inline-end: var(--_ui5_slider_start_end_point_left);
	background-color: var(--_ui5_slider_progress_after_background);
	border: var(--_ui5_slider_progress_after_border);
}

.ui5-slider-progress {
	background: var(--_ui5_slider_progress_background);
	border-radius: var(--_ui5_slider_progress_border_radius);
	height: var(--_ui5_slider_progress_height);
	position: relative;
	outline: none;
	box-sizing: var(--_ui5_slider_active_progress_box_sizing);
	border: var(--_ui5_slider_active_progress_border);
	left: var(--_ui5_slider_active_progress_left);
	top: var(--_ui5_slider_active_progress_top);
}

.ui5-slider-tickmarks {
	list-style: none;
	padding: 0;
	margin: 0;
	top: var(--_ui5_slider_tickmark_top);
	display: flex;
	box-sizing: border-box;
	width: 100%;
	justify-content: space-between;
	position: absolute;
	z-index: 1;
}

.ui5-slider-tickmarks li {
	height: var(--_ui5_slider_tickmark_height);
	border-inline-start: 0.0625rem solid var(--_ui5_slider_tickmark_bg);
}

.ui5-slider-handle {
	background: var(--_ui5_slider_handle_background);
	border: var(--_ui5_slider_handle_border);
	border-radius: var(--_ui5_slider_handle_border_radius);
	position: relative;
	outline: none;
	height: var(--_ui5_slider_handle_height);
	width: var(--_ui5_slider_handle_width);
	box-sizing: var(--_ui5_slider_handle_box_sizing);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
}

[slider-icon] {
	display: var(--_ui5_slider_handle_icon_display);
	color: var(--sapContent_Selected_ForegroundColor);
	width: var(--_ui5_slider_handle_icon_size);
	height: var(--_ui5_slider_handle_icon_size);
}

.ui5-slider-root .ui5-slider-handle:focus [slider-icon] {
	display: var(--_ui5_range_slider_active_handle_icon_display);
}

.ui5-slider-progress-container:hover ~ .ui5-slider-handle:not(:focus),
.ui5-slider-handle:hover {
	background: var(--_ui5_slider_handle_hover_background);
	border: var(--_ui5_slider_handle_hover_border);
}

.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,
.ui5-slider-handle:focus {
	outline: var(--_ui5_slider_handle_outline);
	outline-offset: var(--_ui5_slider_handle_outline_offset);
	border: var(--_ui5_slider_handle_focus_border);
	background: var(--_ui5_slider_handle_background_focus);
}

.ui5-slider-handle.ui5-slider-handle--start:focus,
.ui5-slider-handle--end:focus {
	border: var(--_ui5_slider_handle_focus_border);
}

.ui5-slider-root:focus:hover .ui5-slider-handle,
.ui5-slider-handle:focus:hover {
	border: var(--_ui5_slider_handle_focus_border);
}

.ui5-slider-handle-container {
	position: absolute;
	margin-inline-start: calc(-1 * var(--_ui5_slider_handle_width) / 2);
	top: var(--_ui5_slider_handle_top);
}

:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip {
	display: flex;
	font-family: var(--sapFontFamily);
	justify-content: center;
	align-items: center;
	visibility: hidden;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
	bottom: var(--_ui5_slider_tooltip_bottom);
	background: var(--_ui5_slider_tooltip_background);
	border: var(--_ui5_slider_tooltip_border);
	border-radius: var(--_ui5_slider_tooltip_border_radius);
	box-shadow: var(--_ui5_slider_tooltip_box_shadow);
	font-size: var(--_ui5_slider_tooltip_fontsize);
	color: var(--_ui5_slider_tooltip_color);
	height: var(--_ui5_slider_tooltip_height);
	min-width: var(--_ui5_slider_tooltip_min_width);
	padding: var(--_ui5_slider_tooltip_padding);
	box-sizing: var(--_ui5_slider_tooltip_border_box);
}

:host(:not([hidden])):host([editable-tooltip]) .ui5-slider-handle-container .ui5-slider-tooltip {
	border: none;
	background: none;
	box-shadow: none;
}

:host([editable-tooltip]) .ui5-slider-tooltip {
	padding: 0;
	box-shadow: none;
}

.ui5-slider-tooltip [ui5-input] {
	width: 100%;
	text-align: center;
}

.ui5-slider-tooltip-value {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ui5-slider-labels {
	position: absolute;
	top: 1.25rem;
	margin: 0;
	padding: 0;
	white-space: nowrap;
    height: 1rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.ui5-slider-labels li {
    position: relative;
	list-style: none;
	margin: 0;
	text-align: center;
	display: inline-block;
	font-family: var(--sapFontFamily);
	font-size: var(--_ui5_slider_label_fontsize);
	padding-top: 0;
	box-sizing: border-box;
    width: 0.0625rem;
    visibility: hidden;
}

.ui5-slider-labels li::after {
	content: attr(data-counter);
	position: absolute;
	top: 0;
	visibility: visible;
    display: inline-block;
    width: 2rem;
	color: var(--_ui5_slider_label_color);
    transform: translateX(-50%);
}

.ui5-slider-hidden-labels li:not(:first-child):not(:last-child)::after {
	visibility: hidden;
}

.ui5-slider-handle:focus .ui5-slider-tooltip {
	bottom: var(--_ui5_slider_handle_focused_tooltip_distance);
}

.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range {
	border-inline-start: 1px solid var(--_ui5_slider_tickmark_in_range_bg);
}

:host([show-tickmarks]) .ui5-slider-progress {
	height: var(--_ui5_slider_no_tickmarks_progress_height);
	border: var(--_ui5_slider_no_tickmarks_active_progress_border);
	left: var(--_ui5_slider_no_tickmarks_active_progress_left);
	top: var(--_ui5_slider_no_tickmarks_active_progress_top);
}

:host([show-tickmarks]) .ui5-slider-progress-container {
	top: var(--_ui5_slider_no_tickmarks_progress_container_top);
}

.ui5-slider-handle:focus:after {
	content: "";
	display: var(--_ui5_slider_handle_focus_visibility);
	width: calc(100% + (var(--sapContent_FocusWidth) * 2) + 2px);
	height: calc(100% + (var(--sapContent_FocusWidth) * 2) + 2px);
	border: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
	position: absolute;
	border-radius: var(--_ui5_slider_handle_border_radius);
	pointer-events: none;
}